<template>
  <div class="page">
    <nav-bar
      style="background-color: transparent"
      title="运营平台"
      :leftBack="false"
    ></nav-bar>
    <div>
      <van-cell-group>
        <van-field
        class="inputET"
          v-model="loginId"
          placeholder="请输入用户名"
          left-icon="user-circle-o"
        />
        <van-field
        class="inputET"
          v-model="loginPwd"
          type="password"
          placeholder="请输入密码"
          left-icon="closed-eye"
        />
      </van-cell-group>
      <van-row>
        <van-col offset="4" span="16">
          <van-button type="info" @click="login">登录</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import NavBar from "../components/NavBar";
import comm from "../../tools/comm";
import tools from "../../tools/tools";
import NJS from "../../tools/nhjssdk";
import api from "../../tools/api";
import ui from "../../tools/ui";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      loginId: "admin",
      loginPwd: "admin123",
    };
  },
  mounted() {
    //页面初始化
    NJS.app({
      action: "getLocalData",
      callback: function (res) {
        let result = JSON.parse(res.result);
        for (let key in result) {
          tools.setLocalData(key, result[key]);
        }
      },
    });
  },
  methods: {
    login() {
      let enCodePwd = tools.crypto.Encrypt(this.loginPwd);
      let self = this;
      ui.showLoading();
      api.ajax({
        methodName: "app/login",
        data: {
          loginId: self.loginId,
          loginPassword: enCodePwd,
        },
        s(code, res) {
          if (code == 1) {
            let token = res.token;
            tools.logToStr("token=" + token);
            tools.setLocalData(comm.TOKEN, JSON.stringify(token));
            //jump to main page
            self.$router.push("/home");
          }
          ui.hideLoading();
        },
      });
    },
  },
};
</script>
<style scoped>
.page {
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  height: 100vh;
}

.van-cell-group {
  background-color: transparent;
}
.van-cell {
  color: #fff;
  background-color: transparent;
  font-size: 18px;
  width: 90%;
}
.van-cell::after {
  border-bottom: 0px;
}
.van-button--normal {
  width: 100%;
  margin-top: 15px;
  background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
  border: 0px;
}
.inputET{
  border : 1px solid #fff;
  border-radius: 35px;
  margin: 10px;
}
.van-field >>> .van-field__control{
  color : #fff;
}
.van-field >>> .van-field__label{
  color : #fff;
}

.van-hairline--top-bottom::after{
  border-top: 0px;
  border-bottom: 0px;
}
.van-field >>> .van-field__left-icon .van-icon{
  font-size: 28px;
  padding-right: 10px;
}
</style>
